<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-button v-auth="'xforce:gitlab:author'" type="primary" @click="handleSync" class="right">同步用户</el-button>
    </el-row>
    <el-row :gutter="20">
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中"
        stripe border fit highlight-current-row style="width: 100%">
        <el-table-column prop="authorId" label="ID" width="40" align="center"></el-table-column>
        <el-table-column label="头像" width="80" align="center">
          <template slot-scope="scope">
            <img with="25" height="25" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{getParsedTime(scope.row.created)}}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="登录名"></el-table-column>
        <el-table-column prop="nickName" label="显示名"></el-table-column>
        <el-table-column label="状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{getStatusStr(scope.row.status)}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row :gutter="20">
      <el-pagination
        background
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
        layout="sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="page.size"
        :total="page.totalItem">
      </el-pagination>
    </el-row>
  </div>
</template>

<style rel="stylesheet/less" lang="less" scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
</style>


<script>
import { list, sync } from '@/api/author';
import { parseTime as getParsedTime } from '@/utils/index';

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      page: {
        size: 20,
        current: 1,
        totalItem: 1,
      },
    };
  },
  created() {
    this.refreshData();
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'success',
        1: 'danger',
        2: 'danger',
      };
      return statusMap[status];
    },
  },
  methods: {
    getParsedTime,
    fetchData(page, size) {
      this.listLoading = true;
      list({ page, size }).then((response) => {
        this.list = response.data.list;
        this.page.totalItem = response.data.totalItem;
        this.listLoading = false;
      });
    },
    refreshData() {
      this.fetchData(this.page.current, this.page.size);
    },
    handleSync() {
      this.listLoading = true;
      sync().then(() => {
        this.refreshData();
      });
    },
    handlePageChange(currentPage) {
      this.page.current = currentPage;
      this.refreshData();
    },
    handlePageSizeChange(size) {
      this.page.size = size;
      this.refreshData();
    },
    getStatusStr(state) {
      switch (state) {
        case 0: return '正常';
        case 1: return '禁用';
        case 2: return '删除';
        default: return '';
      }
    },
  },
};
</script>
